<!--
 * @Description: 自定义datepicker组件
 * @Author: Zhanghan
 * @Date: 2025-03-18 20:04:37
 * @LastEditTime: 2025-03-18 20:39:43
 * @LastEditors: Zhanghan
-->
<template>
  <ElDatePicker
    v-bind="getBindValue"
    v-model="state"
    @change="change"
    :style="{ width: '100%' }"
  />
</template>

<script lang="ts" setup>
import { ref, useAttrs, onMounted, computed } from "vue";
import { ElDatePicker } from "element-plus";
import dayjs from "dayjs";

defineOptions({ name: "ProDatePicker" });
const attrs = useAttrs();
const emit = defineEmits(["change"]);
const getBindValue = computed(() => ({ ...attrs, ...props }));

interface ProDatePickerProps {
  value?: any;
  placeholder?: string;
  readonly?: boolean;
  type?:
    | "year"
    | "years"
    | "month"
    | "months"
    | "date"
    | "dates"
    | "datetime"
    | "week"
    | "datetimerange"
    | "daterange"
    | "monthrange"
    | "yearrange";
}

const props = withDefaults(defineProps<ProDatePickerProps>(), {
  readonly: false,
  type: "date",
  placeholder: "请选择日期",
});

const state = ref();

onMounted(() => {
    console.log('初始化');
    
  console.log(getBindValue);
  console.log(attrs);
});

// 变化回调
const change = (val: any) => {
  console.log("🚀 ~ change ~ val:", val);
  emit("change", val);
};
</script>
